<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="产品名称" prop="productName">
          <el-input
            v-model="queryParams.productName"
            placeholder="请输入产品名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="产品型号" prop="productModel">
          <el-input
            v-model="queryParams.productModel"
            placeholder="请输入产品型号"
            clearable
          />
        </el-form-item>
        <el-form-item label="产品编号" prop="devicesno">
          <el-input
            v-model="queryParams.devicesno"
            placeholder="请输入产品编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="产品详细" prop="productDesc">
          <el-input
            v-model="queryParams.productDesc"
            placeholder="请输入产品明细"
            clearable
          />
        </el-form-item>
        <!-- <el-form-item label="是否上架" prop="isAnchor">
          <el-select v-model="queryParams.isAnchor" placeholder="是否上架" clearable>
            <el-option label="是" value="是"/>
            <el-option label="否" value="否"/>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['system:role:add']"
          >新增</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
        </el-col> -->
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete2"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['system:role:export']"
          >导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="产品编号" align="center" prop="devicesno" />
        <el-table-column label="产品名称" align="center" prop="productName" />
        <el-table-column label="产品型号" align="center" prop="productModel" />
        <el-table-column label="产品详细" align="center" prop="productDesc" />
        <el-table-column label="产品单价" align="center" prop="productPrice" />
        <!-- <el-table-column label="是否上架" align="center" prop="isAnchor" /> -->
        <el-table-column label="入库时间" align="center" prop="instockDate" />
        <!-- <el-table-column label="库存数量" align="center" prop="stockNum" /> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:role:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:role:remove']"
            >删除</el-button>
            <!-- <el-button
              size="mini"
              type="text"
              icon="el-icon-bottom"
              @click="handleSolid(scope.row)"
              v-hasPermi="['system:role:remove']"
            >入库登记</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-top"
              @click="handleStop(scope.row)"
              v-hasPermi="['system:role:remove']"
            >出库登记</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      
      <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  
      <!-- 添加或修改用户和角色关联对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="产品编号" prop="devicesno">
                <el-input v-model="form.devicesno" placeholder="请输入产品编号" clearable />
            </el-form-item>
            <el-form-item label="产品名称" prop="productName">
              <!-- <el-input v-model="form.productName" placeholder="请输入产品名称" clearable /> -->
              <el-select v-model="form.productName" placeholder="请输入产品名称" clearable @change="productChange">
                <el-option 
                  v-for="item in productList"
                  :label="item.productName" 
                  :value="item.advProductsId"
                  :key="item.advProductsId"/>
              </el-select>
            </el-form-item>
          <el-form-item label="产品型号" prop="productModel">
            <el-input v-model="form.productModel" placeholder="请输入产品型号" clearable disabled/>
          </el-form-item>
          <el-form-item label="产品详细" prop="productDesc">
            <el-input v-model="form.productDesc" placeholder="请输入产品明细" clearable disabled/>
          </el-form-item>
          <el-form-item label="产品单价" prop="productPrice">
            <el-input v-model="form.productPrice" placeholder="请输入产品单价" clearable disabled/>
          </el-form-item>
          <el-form-item label="入库时间" prop="instockDate">
            <el-date-picker 
              v-model="form.instockDate" 
              type="date" 
              placeholder="请选择入库时间" 
              clearable
              value-format="yyyy-MM-dd" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { listProducts, addProducts, updateProducts, delProducts } from '@/api/server/products.js'
  import { listInoutstock, addInoutstock, updateInoutstock, delInoutstock } from '@/api/server/inoutstock.js'
  export default {
    data() {
      return {
        productList: [],
        productType: '1', // 只有设备产品有出入库
        isInout: '1', // 出入库模式 当前页面1[入库]
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          productType: '1',
          productName: '',
          productModel: '',
          productDesc: '',
          productPrice: '',
          isSlive: '',
          createTime: '',
          stocknum: '',
          isInout: '1', // 出入库模式 当前页面1[入库]
          devicesno: '', // 产品编号
          instockDate: '', // 入库时间
          outstockDate: '', // 出库时间
          advProductsId: ''
        },
        showSearch: true,
        single: false,
        multiple: false,
        loading: false,
        currentPage4: 1,
        open1: false,
        open2: false,
        roleList: [
          
        ],
        total: 0,
        title: "",
        open: false,
        form: {},
        rules: {
          devicesno: [
            { required: true, message: "请输入产品编号", trigger: "blur" }
          ],
          productName: [
            { required: true, message: "请输入产品名称", trigger: "blur"}
          ],
          productModel: [
            { required: true, message: "请输入产品型号", trigger: "blur" }
          ],
          productDesc: [
            { required: true, message: "请输入产品明细", trigger: "blur" }
          ],
          productPrice: [
            { required: true, message: "请输入产品单价", trigger: "blur" }
          ],
          instockDate: [
            { required: true, message: "请输入入库时间", trigger: "blur" }
          ]
        },
      }
    },
    created() {
      this.getList();
      this.getProductList();
    },
    methods: {
      handleDelete2(){
      this.$confirm('此操作将永久删除该入库信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delInoutstock(this.ids.join(',')).then((response) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getList();
        }).catch((error) => {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
      // 选择产品发生改变的时候
      productChange(advProductsId){
        this.productList.filter((item) => {
          if(item.advProductsId === advProductsId) {
            this.form.advProductsId = item.advProductsId;
            this.form.productName = item.productName;
            this.form.productModel = item.productModel;
            this.form.productDesc = item.productDesc;
            this.form.productPrice = item.productPrice;
            this.form.isSlive = item.isSlive;
            this.form.stocknum = item.stocknum;
          }
        })
      },
      // 查询到所有的产品
      getProductList(){
        listProducts(this.queryParams).then((response) => {
          this.productList = response.rows
        })
      },
      handleQuery() {
        this.getList();
      },
      resetQuery() {},
      handleExport() {
        this.download('/system/inoutstock/export', {
        ...this.queryParams
      }, `入库产品_${new Date().getTime()}.xlsx`)
      },
      getList() {
        listInoutstock(this.queryParams).then((response) => {
          this.roleList = response.rows;
          this.total = response.total;
        })
      },
      handleSelectionChange() {},
      cancel() {
        this.getList();
        this.open = false;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.advInoutstock)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "设备入库";
      },
      handleUpdate(row) {
        this.reset();
        this.form = row;
        this.open = true;
        this.title = "修改入库信息";
      },
      reset() {
        this.form = {
          nickname: "",
          username: "",
          parentUsername: "",
          status: "",
          isAnchor: ""
        }
      },
      handleDelete(row) {
        this.$confirm('此操作将永久删除该数据 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInoutstock(row.advInoutstock).then((response) => {
            this.getList();
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if(this.title === "设备入库"){
              this.form.isInout = this.isInout;
              addInoutstock(this.form).then((response) => {
                this.getList();
                this.$message({
                  type: 'success',
                  message: '入库成功!'
                });
                this.open = false;
              })
            }
            if(this.title === "修改入库信息"){
              updateInoutstock(this.form).then((response) => {
                this.getList();
                this.$message({
                  type: 'success',
                  message: '修改成功!'
                });
                this.open = false;
              })
            }
          } else {
            this.$message({
              type: 'error',
              message: '表单验证失败!'
            });
          }
        })
      },
      handleSolid(row) {
        this.open1 = true;
        this.title = "入库登记";
      },
      handleStop(row) {
        this.open2 = true;
        this.title = "出库登记";
      },
      cancel1() {
        this.open1 = false;
      },
      cancel2() {
        this.open2 = false;
      },
      
    }
  }
  </script>
  
  <style>
  
  </style>
  
  